<!-- 添加讲师列表的页面 -->
<template>
    <div class="app-container">
        <!-- 添加讲师 -->
            <el-form label-width="120px">
        <el-form-item label="讲师名称">
            <el-input v-model="teacher.name"/>
        </el-form-item>
        <el-form-item label="讲师排序">
            <el-input-number v-model="teacher.sort" controls-position="right" :min="0"/>
        </el-form-item>
        <el-form-item label="讲师头衔">
            <el-select v-model="teacher.level" clearable placeholder="请选择">
            <!--
                数据类型一定要和取出的json中的一致，否则没法回填
                因此，这里value使用动态绑定的值，保证其数据类型是number
            -->
            <el-option :value="1" label="高级讲师"/>
            <el-option :value="2" label="首席讲师"/>
            </el-select>
        </el-form-item>
        <el-form-item label="讲师资历">
            <el-input v-model="teacher.career"/>
        </el-form-item>
        <el-form-item label="讲师简介">
            <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
        </el-form-item>

        <!-- 讲师头像：TODO -->
        <!-- 讲师头像 -->
        <el-form-item label="讲师头像">
                <!-- 头衔缩略图 -->
            <pan-thumb :image="teacher.avatar"/>
            <!-- 文件上传按钮 -->
            <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
            </el-button>
                <!--
            v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调 -->
            <image-cropper
                        v-show="imagecropperShow"
                        :width="300"
                        :height="300"
                        :key="imagecropperKey"
                        :url="BASE_API+'/eduoss/fileoss'"
                        field="file"
                        @close="close"
                        @crop-upload-success="cropSuccess"/>
        </el-form-item>

        <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
// 引入调用teacher.js的文件
import teacherApi from '@/api/edu/teacher.js'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
    // 引入我们的组件
    components:{ImageCropper,PanThumb},
    data(){
        return{
            teacher:{
                name: '',
                sort: 1,
                level: 1,
                career: '',
                intro: '',
                avatar: ''
            },
            saveBtnDisabled: false,
            // 上传弹框的组件是否显示
            imagecropperShow: false,
            imagecropperKey: 0, // key的唯一标识
            BASE_API: process.env.VUE_APP_BASE_API,// 获取dev里面的


        }
    },
    created(){
        
        // // 判断路径中是否有id值 做修改操作
        // if (this.$route.params && this.$route.params.id) {
        //     const id = this.$route.params.id
        //     // 查询数据
        //     // 如果有id的话 就是编辑的按钮
        //     this.getInfor(id)
        // } else {
        //     // 路径没有id 就清空表单
        //     this.teacher = {}
        // }
        this.init()

    },
    // 监听
    watch:{
        $route(to,from){ // 路由变化方式  方法就会执行
            this.init()
        }
    },
    methods:{
        // 初始化
        init(){
              // 判断路径中是否有id值 做修改操作
            if (this.$route.params && this.$route.params.id) {
                const id = this.$route.params.id
                // 查询数据
                // 如果有id的话 就是编辑的按钮
                this.getInfor(id)
            } else {
                // 路径没有id 就清空表单
                this.teacher = {}
            }
        },

        // 关闭上传弹窗
        close() {
            // 关闭弹框
            this.imagecropperShow=false;
            // 上传组件做一个初始化
            this.imagecropperKey = this.imagecropperKey + 1
        },
        // 上传成功的方法
        // 这个data直接做了封装 是 resp.data 的data里面也有内容
        cropSuccess(data){
            // 上传成功返回图片地址
            this.teacher.avatar = data.url
             // 关闭弹框
             this.imagecropperShow=false;
             // 上传组件做一个初始化
             // 这样的话就不用再点击两次
            this.imagecropperKey = this.imagecropperKey + 1
        },

        // 根据讲师id查询信息的方法
        getInfor(id){
            teacherApi.getTeacherInfo(id).then(resp => {
                // 就进行回显
                this.teacher = resp.data.teacher
            })
        },

        

        // 可修改 可 保存
        saveOrUpdate(){

            // 判断是保存 还是 修改(判断是否有id)
            // 有id就是添加
            if(!this.teacher.id){
               
                // 添加(调用方法)
                this.saveTeacher()
            } else {
                  // 有id 就是修改
                this.updateTeacher()
            }

           
        },

        // 修改讲师的方法
        updateTeacher(){
            teacherApi.updateTeacherInfo(this.teacher).then(resp => {
                if(resp.success == true){
                    // 提示信息
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    
                    // 回到列表
                    // 但是我们这个方法是没有查询的 所以要使用我们的路由跳转
                    this.$router.push({path:'/teacher/table'})
                    // 因为我们有钩子函数 所有不用执行了
                } else {
                    this.$message({
                    type: 'error',
                    message: '修改失败!'
                    });   
                }
            }).catch(error => {
                this.$message({
                    type: 'error',
                    message: '修改失败!'
                }); 
            })
        },
        
        //添加讲师方法
        saveTeacher(){
            teacherApi.addTeacher(this.teacher).then(resp => {
                if(resp.success == true){
                    // 提示信息
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    // 回到列表
                    // 但是我们这个方法是没有查询的 所以要使用我们的路由跳转
                    this.$router.push({path:'/teacher/table'})
                    // 因为我们有钩子函数 所有不用执行了
                } else {
                    this.$message({
                    type: 'error',
                    message: '添加失败!'
                    });   
                }
                
            }).catch(error => {
                this.$message({
                    type: 'error',
                    message: '添加失败!'
                });   
            })
        },

        
    }
}
</script>
